<!--违规流水-->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isCheckbox="true"
      @setSelectedNode="setSelectedNode"
      :paramName="paramName"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a class="ake_btn ake_btn_text" @click.prevent="exportData()">导出</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MOBILE:VIOLATE:SETTYPE')"
              @click.prevent="showViolateTypeModal('violateTypeModal')"
            >违规类型设置</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else-if="'imgUrlList' == props.prop">
                  <span v-for="(item,index) in scope.row.imgUrlList" class="carNoImage" :key="item">
                    <span v-if="0 == index">
                      <a class="imgLink" @click="showPicModal('picModal', scope.row.imgUrlList)">
                        <img
                          class="carNoImage"
                          style="width: 60px;height:30px;"
                          alt="暂无"
                          :src="item"
                        />
                      </a>
                    </span>
                  </span>
                </span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <basic-modal ref="picModal" width="700" customeClass="pic-modal" static="true">
      <h3 slot="title"></h3>
      <div class="modal-body" slot="modal-body">
        <el-carousel :interval="5000" arrow="always" height="300px">
          <el-carousel-item v-for="(item,index) in picPath" :key="item">
            <img :src="item" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
    </basic-modal>

    <basic-modal ref="violateTypeModal" width="800" static="true">
      <h3 slot="title">违规类型设置</h3>
      <div class="modal-body weigui-modal" slot="modal-body">
        <el-form
          :inline="true"
          ref="violateTypeForm"
          :model="newViolateTypeList"
          label-position="left"
          label-width="120px"
        >
          <template v-for="(violateType,index) in violateTypeList">
            <!--此处不进行eventType校验-->
            <div :key="index">
              <el-form-item label="类型" label-width="70px">
                <el-input :value="violateType.eventType" disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item label="关联规则编号">
                <el-input :value="violateType.channelEventCode" disabled="disabled"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  class="ake_btn ake_font_btn ake_btn_text"
                  icon="el-icon-delete"
                  @click.prevent="delConfirmTipModal_del_open(index, violateType.id)"
                ></el-button>
              </el-form-item>
            </div>
          </template>

          <!-- 新增列表 -->
          <template v-for="(violateType,index) in newViolateTypeList.list">
            <div :key="index">
              <el-form-item
                :prop="'list.' + index + '.eventType'"
                label="类型"
                label-width="70px"
                :rules="[{ required: true, message: '类型不能为空', trigger: 'blur' },
                  { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }]"
              >
                <el-input v-model="violateType.eventType"></el-input>
              </el-form-item>
              <el-form-item
                :prop="'list.' + index + '.channelEventCode'"
                label="关联规则编号"
                :rules="{ min: 0, max: 20, message: '长度在 0 到 20 个字符', trigger: 'blur' }"
              >
                <el-input v-model="violateType.channelEventCode"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  class="ake_btn ake_font_btn ake_btn_text el-icon-delete"
                  icon="el-icon-delete"
                  @click.prevent="delConfirmTipModal_del_open(index)"
                ></el-button>
              </el-form-item>
            </div>
          </template>
          <el-row type="flex" justify="center" style="width: 600px">
            <el-form-item>
              <el-button
                size="small"
                class="ake_btn ake_font_btn ake_btn_text"
                icon="el-icon-plus"
                @click.prevent="addViolateType()"
              ></el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="submitViolateTypeForm">保存</button>
        <button class="ake_btn ake_btn_text" @click="closed('violateTypeModal')">取消</button>
      </div>
    </basic-modal>

    <!--确认删除吗？  modal-->
    <basic-modal ref="delConfirmTipModal" bodyTxt="确认删除吗？">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click="delViolateType(delNo,id)">确定</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('delConfirmTipModal')">关闭</button>
      </div>
    </basic-modal>

    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import parking_violate from "./js/parking_violate.js";

export default {
  name: "parkingViolate",
  mixins: [common, stardardList, invokeModal, images, parking_violate],
  components: {
    BigPicModal
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

    return {
      paramName: "parkIds",
      fixedCols: 4,
      total: 0,
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "违规时间",
          propName: "createTimeFrom,createTimeTo",
          value: today,
          style: { width: "360px" }
        },
        {
          type: "text",
          isShow: false,
          name: "code",
          text: "违规编号",
          value: "",
          style: { width: "360px" }
        },
        {
          type: "text",
          isShow: false,
          name: "realName",
          text: "现场管理员",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "carCode",
          text: "车牌号",
          value: ""
        },
        {
          type: "select",
          isShow: false,
          name: "eventTypeId",
          text: "违规类型",
          value: "",
          options: []
        },
        {
          type: "select",
          isShow: false,
          name: "eventStatus",
          text: "状态",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "暂未通知", value: "0" },
            { name: "通知车主", value: "1" },
            { name: "通知失败", value: "2" },
            { name: "仅作记录", value: "3" }
          ]
        },
        {
          type: "text",
          isShow: false,
          name: "eventContent",
          text: "违规内容",
          value: ""
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "code",
          text: "违规编号",
          sortable: true,
          minWidth: 50,
          initHidden: true
        },
        {
          index: 2,
          isShow: false,
          prop: "realName",
          text: "现场管理员",
          sortable: true,
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "phone",
          text: "管理员手机号码",
          sortable: true,
          minWidth: 60,
          initHidden: true
        },
        {
          index: 4,
          isShow: false,
          prop: "carCode",
          text: "车牌号",
          sortable: true,
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: "ownerPhone",
          text: "车主手机号",
          sortable: true,
          minWidth: 60
        },
        {
          index: 6,
          isShow: false,
          prop: "eventType",
          text: "违规类型",
          sortable: true,
          minWidth: 50
        },
        {
          index: 7,
          isShow: false,
          prop: "createTime",
          text: "违规时间",
          sortable: true,
          minWidth: 80
        },
        {
          index: 8,
          isShow: false,
          prop: "imgUrlList",
          text: "车辆图片",
          sortable: false,
          minWidth: 60
        },
        {
          index: 9,
          isShow: false,
          prop: "eventContent",
          text: "违规内容",
          sortable: true,
          minWidth: 60,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "eventStatusStr",
          text: "状态",
          sortable: true,
          minWidth: 50
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.pic-modal {
  .modal-body {
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
}
.el-carousel__container {
  img {
    height: 100%;
    width: 100%;
  }
}

.weigui-modal.modal-body {
  .ake_btn {
    padding: 0 !important;
    i {
      font-size: 16px !important;
    }
  }
}
</style>

<style lang="less">
.weigui-modal.modal-body {
  .ake_btn {
    i {
      font-size: 16px !important;
    }
  }
}
</style>
